<template>
  <el-dialog v-model="state.visible" title="同步配置" width="600">
    <el-form :model="state" label-width="120px">
      <el-form-item prop="type" label="同步范围">
        <el-radio-group v-model="state.type">
          <el-radio :value="0" :label="0">所有商家</el-radio>
          <el-radio :value="1" :label="1">指定商家</el-radio>
        </el-radio-group>
      </el-form-item>
      <el-form-item prop="shopId" label="商家账号" v-if="state.type == 1">
        <el-input
          type="number"
          v-model="state.shopId"
          placeholder="请输入指定的商家id"
        ></el-input>
      </el-form-item>
      <el-form-item style="margin-top: 16px">
        <el-button @click="close">取消</el-button>
        <el-button type="primary" @click="handleOk">确定</el-button>
      </el-form-item>
    </el-form>
  </el-dialog>
</template>
<script setup>
import { postShopConfigModelSyncData } from "@/api/shop";
import { reactive } from "vue";

const state = reactive({
  visible: false,
  type: 0,
  shopId: "",
  configModelIds: [],
});

function handleOk() {
  postShopConfigModelSyncData({
    shopId: state.type == 0 ? undefined : +state.shopId,
    configModelIds: state.configModelIds,
  }).then((res) => {
    ElMessage.success("同步成功");
    close();
  });
}

function show(ids = []) {
  state.visible = true;
  state.type = 0;
  state.shopId = "";
  state.configModelIds = ids;
}

function close() {
  state.visible = false;
  state.type = 0;
  state.shopId = "";
}

defineExpose({
  show,
});
</script>
